Image gallery

2024-06-08 18:17| 来源: 网络整理| 查看: 265

You have been provided with some HTML, CSS and image assets and a few lines of JavaScript code; you need to write the necessary JavaScript to turn this into a working program. The HTML body looks like this:

htmlImage gallery example Darken

The example looks like this:

The most interesting parts of the example's CSS file:

It absolutely positions the three elements inside the full-img — the in which the full-sized image is displayed, an empty that is sized to be the same size as the and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a that is used to control the darkening effect. It sets the width of any images inside the thumb-bar (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.

Your JavaScript needs to:

Declare a const array listing the filenames of each image, such as 'pic1.jpg'. Declare a const object listing the alternative text for each image. Loop through the array of filenames, and for each one, insert an element inside the thumb-bar that embeds that image in the page along with its alternative text. Add a click event listener to each inside the thumb-bar so that, when they are clicked, the corresponding image and alternative text are displayed in the displayed-img element. Add a click event listener to the so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.

To give you more of an idea, have a look at the finished example (no peeking at the source code!)

【本文地址】

公司简介

联系我们